<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="人员详情"></u-navbar>
		<view class="d-p-30" v-if="info">
			<view class="card d-p-30" style="position: relative;">
				<view class="d-flex d-col-top">
					<u--image radius="10rpx" :src="info.profile || '/static/image/photo.png'" width="160rpx" height="160rpx"></u--image>
					<view class="d-flex-1 d-p-l-30">
						<view class="d-font-36 u-line-1" style="font-weight: bold;color: #151C24;max-width: 300rpx;">{{ info.xm }}</view>
						<view class="d-flex d-font-24 d-m-t-30" style="color: #5D6672;">
							<text class="d-m-r-20">{{ info.xb || '保密' }}</text>
							<u-line direction="col" length="30rpx"></u-line>
							<text class="d-m-l-20 d-m-r-20">{{ info.mz || '无数据源' }}</text>
							<u-line direction="col" length="30rpx"></u-line>
							<text class="d-m-l-20 d-m-r-20">{{ info.jiGuan || '无数据源' }}</text>
						</view>
						<view class="d-font-24 d-m-t-20" style="font-weight: bold;color: #5D6672;">{{ info.zjhm | str }}</view>
						<view class="d-font-24 d-m-t-20 d-flex" style="font-weight: bold;color: #5D6672;" @click="call(info.lxfs)">
							<text class="d-m-r-26">{{ info.lxfs }}</text>
							<u--image width="32rpx" height="32rpx" src="/static/icon/icon-19.png"></u--image>
						</view>
						<view class="tag">{{ info.smrz }}</view>
					</view>
				</view>

				<view class="d-flex d-m-t-60 d-row-between d-p-b-30">
					<view class="d-flex-1 d-text-center" @click="work">
						<view class="d-flex d-row-center"><u--image src="/static/icon/icon-20.png" width="58rpx" height="58rpx"></u--image></view>
						<view class="d-font-24 d-m-t-10" style="color: #606464;">考勤</view>
					</view>
					<view class="d-flex-1 d-text-center" @click="wages">
						<view class="d-flex d-row-center"><u--image src="/static/icon/icon-21.png" width="58rpx" height="58rpx"></u--image></view>
						<view class="d-font-24 d-m-t-10" style="color: #606464;">工资</view>
					</view>
					<!-- <view class="d-flex-1 d-text-center" @click="train">
						<view class="d-flex d-row-center"><u--image src="/static/icon/icon-22.png" width="58rpx" height="58rpx"></u--image></view>
						<view class="d-font-24 d-m-t-10" style="color: #606464;">培训</view>
					</view> -->
					<view class="d-flex-1 d-text-center" @click="mineCredit">
						<view class="d-flex d-row-center"><u--image src="/static/icon/icon-23.png" width="58rpx" height="58rpx"></u--image></view>
						<view class="d-font-24 d-m-t-10" style="color: #606464;">信用</view>
					</view>
					<view class="d-flex-1 d-text-center" @click="other">
						<view class="d-flex d-row-center"><u--image src="/static/icon/icon-22.png" width="58rpx" height="58rpx"></u--image></view>
						<view class="d-font-24 d-m-t-10" style="color: #606464;">其他</view>
					</view>
				</view>
			</view>

			<view class="card d-m-t-30 d-p-30">
				<view class="d-flex d-m-b-20">
					<view class="d-font-32 d-flex-1" style="color: #151C24;font-weight: bold;">当前单位信息</view>
					<view>
						<u-button
							text="查看"
							shape="circle"
							type="info"
							:customStyle="{
								color: '#FFB61D',
								borderColor: '#FFB61D'
							}"
							size="mini"
							@click="enterpries"
						></u-button>
					</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="" style="color: #949AA2;">单位名称</view>
					<view class="d-flex-1 d-p-l-30 d-text-right" style="color: #162233;">{{ info.qymc }}</view>
				</view>
				<view class="d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">统一社会信用代码</view>
					<view style="color: #162233;">{{ info.tyshxydm || '无数据源' }}</view>
				</view>
				<!-- <view class="d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">单位类型</view>
					<view style="color: #162233;">{{ info.qylx || '无数据源' }}</view>
				</view> -->
			</view>

			<view class="card d-m-t-30 d-p-30">
				<view class="d-flex d-m-b-20"><view class="d-font-32 d-flex-1" style="color: #151C24;font-weight: bold;">当前项目信息</view></view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="" style="color: #949AA2;">项目名称</view>
					<view class="d-flex-1 d-p-l-30 d-text-right" style="color: #162233;">{{ info.gcmc || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="" style="color: #949AA2;">项目地址</view>
					<view class="d-flex-1 d-p-l-30 d-text-right" style="color: #162233;">{{ info.xmdz || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">项目负责人</view>
					<view style="color: #162233;">{{ info.constructionxmjlname || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">负责人联系电话</view>
					<view style="color: #162233;">
						<u--text class="d-m-l-20" color="#21A5F3" size="28rpx" mode="phone" call :text="info.constructionxmjllxdh || '无数据源'"></u--text>
					</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">班组名称</view>
					<view style="color: #162233;">
						<text>{{ info.bzmc || '无数据源' }}</text>
						<text class="d-m-l-20" style="color: #FFB61D;" @click="team">查看</text>
					</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">角色</view>
					<view style="color: #162233;">{{ info.gwlx || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">从事工种</view>
					<view style="color: #162233;">{{ info.drzw || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">进场时间</view>
					<view style="color: #162233;">{{ info.jcsj || '无数据源' }}</view>
				</view>
				<view class="d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">离场时间</view>
					<view style="color: #162233;">{{ info.lcsj || '无数据源' }}</view>
				</view>
			</view>

			<view class="card d-m-t-30 d-p-30">
				<view class="d-flex d-m-b-20"><view class="d-font-32 d-flex-1" style="color: #151C24;font-weight: bold;">人员信息</view></view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">人员类型</view>
					<view style="color: #162233;">{{ info.rylx || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="" style="color: #949AA2;">身份证住址</view>
					<view class="d-flex-1 d-text-right" style="color: #162233;">{{ info.hjszd || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">身份证有效起始日期</view>
					<view style="color: #162233;">{{ info.yxksrq || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">身份证有效终止日期</view>
					<view style="color: #162233;">{{ info.yxjsrq || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">签发机构</view>
					<view style="color: #162233;">{{ info.qfjg || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">实际住址</view>
					<view style="color: #162233;">{{ info.sjzz || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">工资卡类别</view>
					<view style="color: #162233;">{{ info.gzklb || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">工资卡开卡银行</view>
					<view style="color: #162233;">{{ info.khhyh || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">工资卡开卡行号</view>
					<view style="color: #162233;">{{ info.khhdm || '无数据源' }}</view>
				</view>
				<view class="d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">工资卡卡号</view>
					<view style="color: #162233;">{{ info.gzkkh || '无数据源' }}</view>
				</view>
			</view>
			
			<view class="card d-m-t-30 d-p-30">
				<view class="d-flex d-m-b-20"><view class="d-font-32 d-flex-1" style="color: #151C24;font-weight: bold;">合同信息</view></view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">合同类型</view>
					<view style="color: #162233;">{{ info.htlx || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">合同签订日期</view>
					<view style="color: #162233;">{{ info.htqdsj || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">合同起始日期</view>
					<view style="color: #162233;">{{ info.htqssj || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">合同终止日期</view>
					<view style="color: #162233;">{{ info.htzzsj || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">合同编号</view>
					<view style="color: #162233;">{{ info.lwhtbh || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">工资工资方式</view>
					<view style="color: #162233;">{{ info.gzjsfs || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">工资标准</view>
					<view style="color: #162233;">{{ info.gzbz || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">工资支付日期</view>
					<view style="color: #162233;">{{ info.gzzfrq || '无数据源' }}</view>
				</view>
				<view class="d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">开始工作日期</view>
					<view style="color: #162233;">{{ info.ksgzrq || '无数据源' }}</view>
				</view>
			</view>
			
			<view class="card d-m-t-30 d-p-30">
				<view class="d-flex d-m-b-20"><view class="d-font-32 d-flex-1" style="color: #151C24;font-weight: bold;">其他信息</view></view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">是否参加基本安全培训</view>
					<view style="color: #162233;">{{ info.sfcjjbaqpx || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">职称/岗位证书</view>
					<view style="color: #162233;">{{ info.zcgwzs || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">技能水平/等级</view>
					<view style="color: #162233;">{{ info.jnspdj || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">婚姻状况</view>
					<view style="color: #162233;">{{ info.hyzk || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">政治面貌</view>
					<view style="color: #162233;">{{ info.zzmm || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">是否加入工会</view>
					<view style="color: #162233;">{{ info.sfjrgh || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">是否有重大疾病史</view>
					<view style="color: #162233;">{{ info.sfyzdjbs || '无数据源' }}</view>
				</view>
				<view class="u-border-bottom d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">紧急联系人姓名</view>
					<view style="color: #162233;">{{ info.jjlxrxm || '无数据源' }}</view>
				</view>
				<view class="d-flex d-font-28" style="height: 80rpx;">
					<view class="d-flex-1" style="color: #949AA2;">紧急联系人电话</view>
					<view style="color: #162233;">{{ info.jjlxdh || '无数据源' }}</view>
				</view>
			</view>

			<view class="card d-m-t-30 d-p-30">
				<view class="d-flex d-m-b-20"><view class="d-font-32 d-flex-1" style="color: #151C24;font-weight: bold;">附件</view></view>
				<view class="table">
					<view class="tr">
						<view class="th d-p-l-30">序号</view>
						<view class="th">附件</view>
						<view class="th">数量</view>
					</view>
					<template v-if="file && file.length > 0">
						<view class="tr" v-for="(item, index) in file" :key="index" @click="fileInfo(item)">
							<view class="td d-p-l-30">{{ index + 1 }}</view>
							<view class="td">
								<text style="color: #21A5F3;">{{ item.attachName }}</text>
							</view>
							<view class="td">{{ item.count }}</view>
						</view>
					</template>
				</view>
				<view class="d-flex d-row-center d-p-t-20" v-if="!file || file.length <= 0">
					<view><u-empty mode="list" icon="/static/image/none.png" text="暂无附件信息"></u-empty></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getStaffInfo, getAtta } from '../../../common/api.js';
export default {
	data() {
		return {
			id: null,
			info: null,
			file: null
		};
	},
	onLoad(e) {
		this.id = e.id;
		this.init();
	},
	methods: {
		init() {
			getStaffInfo({
				id: this.id
			})
				.then(e => {
					this.info = e.data;

					return getAtta({
						params: {
							ywlx: 'salary_smzgl_ryxx',
							ywbh: this.id
						}
					});
				})
				.then(e => {
					this.file = e.data;
				});
		},
		fileInfo(item) {
			let list = item.attachList;
			if (!list) {
				return uni.$u.toast('暂无附件');
			}
			uni.previewImage({
				urls: list.map(e => {
					return e.attachUrl;
				}),
				indicator: 'number',
				loop: true,
				fail: e => {
					console.error(e);
					uni.$u.toast('系统繁忙, 请稍后再试!');
				}
			});
		},
		call(phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			});
		},
		work() {
			uni.$u.route({
				url: '/pages/index/work/signCard',
				params: {
					rybh: this.info.id,
					xm: this.info.xm,
					xb: this.info.xb,
					zjhm: this.info.zjhm,
					bzmc: this.info.bzmc,
					id: this.info.id,
					smrz: this.info.smrz,
					gcmc: this.$user.ssgcxx[this.$appIndex].gcmc
				}
			});
		},
		wages() {
			uni.$u.route({
				url: '/pages/index/wages/wages'
			});
		},
		train() {
			uni.$u.route({
				url: '/pages/index/train/train'
			});
		},
		mineCredit() {
			uni.$u.route({
				url: '/pages/mine/mineCredit/mineCredit'
			});
		},
		team() {
			uni.$u.route({
				url: '/pages/index/member/team',
				params: {
					bzid: this.info.bzid
				}
			});
		},
		enterpries() {
			if (!this.info.qybm && !this.info.qybh) {
				return uni.$u.toast('企业编号未录入');
			}
			uni.$u.route({
				url: '/pages/index/member/enterpries',
				params: {
					id: this.info.qybm || this.info.qybh
				}
			});
		},
		other() {
			uni.$u.route({
				url: '/pages/index/member/other'
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fbfcfc;
	.card {
		box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		background-color: #ffffff;

		.tag {
			width: 112rpx;
			height: 44rpx;
			background: #ffb61d;
			border-radius: 24rpx 0rpx 0rpx 24rpx;
			position: absolute;
			color: #ffffff;
			top: 30rpx;
			right: 0;
			font-size: 20rpx;
			line-height: 44rpx;
			text-align: center;
		}

		.table {
			font-size: 28rpx;
			display: table;
			width: 100%;
			vertical-align: middle;
			border: 1px solid #f6f7f8;
			.tr {
				display: table-row;
				.th,
				.td {
					display: table-cell;
					height: 80rpx;
					vertical-align: middle;
				}
				.th {
					font-weight: bold;
					color: #162233;
				}
				&:nth-child(2n-1) {
					background-color: #f6f7f8;
				}
			}
		}
	}
}
</style>
